<template>
  <view class="cont" style="border-radius:5px">
    <view class="contents">
      <view class="title">
        {{data.name}}
        <view class="status">
          <view class="finish" v-if="data.needCheckNum == 0" style="color:#ffffff ">已完成</view>
          <view v-else style="color:#FFF" class="nofinish">未完成</view>
        </view>
      </view>
      <view class="head">
        <view class="tab" style="color: #09BB07; border-right: 1px dashed #eee;font-size: 42rpx;">
          {{data.normalNum}}
          <view class="icon—center">正常</view>
        </view>
        <view class="tab" style="color: #F72D09; border-right: 1px dashed #eee;font-size: 42rpx">
          {{data.abnormalNum}}
          <view class="icon—center">异常</view>
        </view>
        <view class="tab" style="color: #FFA500;font-size: 42rpx">
          {{data.needCheckNum}}
          <view class="icon—center">待检测</view>
        </view>
      </view>
      <view class style="height: 10rpx;"></view>
      <view class="bottom">
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: 0
    },
  },
  data() {
    return {
      remark: ''
    }
  },
  beforeMount() {},
  methods: {}
}
</script>

<style lang="scss" scoped >
.cont {
  position: relative;
 
  // padding: 30rpx 50rpx 15rpx;
  // margin-bottom: 20rpx;

  .contents {
    background-color: white;
    // background-color: #fff;
    // border-top: 1px solid #CCCCCC;
    // border-bottom: 1px solid #CCCCCC;
    // border-radius: 15rpx;
    // margin: 30rpx 50rpx;
    // padding: 10rpx 40rpx;
    // margin-bottom: 10rpx;

    .title {
      font-size: 35rpx;
      font-weight: 600;
      // margin-bottom: 10rpx;
      .status {
        position: absolute;
        text-align: center;
        //
        top: -20rpx;
        right: -20rpx;
        .finish {
          width: 102rpx;
          font-size: 22rpx;
          // height: 31rpx;
          line-height: 31rpx;
          background: linear-gradient(145deg, #09bb07, #008b00);
          border-bottom-left-radius: 40rpx;
          border-top-right-radius: 25rpx;
        }
        .nofinish {
          width: 102rpx;
          font-size: 22rpx;
          line-height: 31rpx;
          background: linear-gradient(145deg, #ff9494, #ff0000);
          border-bottom-left-radius: 40rpx;
          border-top-right-radius: 25rpx;
        }
        // float: right;
        // margin-top: 2rpx;
        // margin-right: 10rpx;
      }

      .iconleft {
        // margin-left: 300rpx;
        float: right;
        margin-top: 14rpx;
      }
    }

    .head {
      display: flex;
      // padding: 40rpx 40rpx 0rpx;
      padding: 6rpx 0rpx 0rpx;

      .tab {
        flex: 1;
        text-align: center;
        // border-right: 1px solid #ccc;
        padding-right: 20rpx;
        // font-size: 30px;
        // font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
        font: 12px/1.5 Tahoma, Helvetica, Arial, '宋体', sans-serif;

        .icon—center {
          //   height: 42px;
          //   line-height: 42px;
          font-size: 25rpx;
          font-weight: 500;
          color: #717171;
        }
      }
    }

    .detail {
      // display: flex;
      // padding-left: 40rpx;

      .de-text {
        // color: #666;
        // flex: 1;
      }

      .de-status {
        // flex: 1;
        // display: flex;
      }
    }

    .bottom {
      margin-top: 10rpx;
      // padding-left: 18rpx;
      color: #111;
    }
  }
}
</style>
